<template>
  <!-- 筛选区 -->
  <div class="sub-filter">
    <!-- 品牌 -->
    <div class="item" v-if="filterBrandsData">
      <div class="head">品牌：</div>
      <div class="body">
        <a @click=" brandChange(item.id)" :class="{ active: filterBrandsData.currentBrandId === item.id }"
          href="javascript:;" v-for="item in filterBrandsData" :key="item.id">{{ item.name }}</a>
      </div>
    </div>
    <!-- 属性/规格 -->
    <template v-if="filterSkusData">
      <div class="item" v-for="item in  filterSkusData" :key="item.id">
        <div class="head">{{ item.name }}：</div>
        <div class="body">
          <a @click="skuChange(item, item1)" :class="{ active: item.currentSkuId === item1.id }" href="javascript:;"
            v-for="item1 in item.properties" :key="item1.id">{{ item1.name }}</a>
        </div>
      </div>
    </template>
  </div>
</template>
<script setup>
import { findSubCategoryFilter } from '@/api/category'
import { useRoute } from 'vue-router'
import { watch, ref, defineEmits } from 'vue'
const route = useRoute()
// 定义二级分类的筛选数据
// 品牌数据
const filterBrandsData = ref(null)
// 规格数据
const filterSkusData = ref(null)
// 获取二级分类的筛选条件数据
const findSubCategoryFilterFn = async id => {
  const { result } = await findSubCategoryFilter(id)
  // 品牌
  // 增加全部这个选项
  result.brands.unshift({ id: null, name: '全部' })
  // 默认选中的品牌id
  result.brands.currentBrandId = ref(null)

  // 规格
  result.saleProperties.forEach(item => {
    // 每一项都增加全部这个选项
    item.properties.unshift({ id: null, name: '全部' })
    // 每一项默认选中的skuid
    item.currentSkuId = ref(null)
  })

  // console.log(result)
  filterBrandsData.value = result.brands
  filterSkusData.value = result.saleProperties
}
// 侦听二级分类id的改变
watch(() => route.params.id, newVal => {
  // 二级路由id有变化且当前的路由是二级分类路由
  if (newVal && route.path === `/cate/sub/${newVal}`) {
    findSubCategoryFilterFn(newVal)
  }
}, { immediate: true })

const emit = defineEmits(['filter-change'])
// 组装sub-filter组件的筛选条件
const filterParams = {}
// 品牌发生改变时
function brandChange(brandId) {
  if (filterBrandsData.value.currentBrandId === brandId) return
  // 更改选中样式
  filterBrandsData.value.currentBrandId = brandId
  // 组装过滤条件
  filterParams.brandId = brandId
  // 把过滤条件传递到父组件中
  emit('filter-change', filterParams)
}

// sku发生改变时
function skuChange(item, item1) {
  if (item.currentSkuId === item1.id) return
  // 更改选中样式
  item.currentSkuId = item1.id
  const attrs = []
  filterSkusData.value.forEach(p => {
     // 获取选中的属性项
    const attr = p.properties.find(p1 => p1.id === p.currentSkuId)
    if (attr && attr.id !== null) { // attr.id!=null是排除
      attrs.push({
        groupName: p.name,
        propertyName: attr.name
      })
    }
  })
  // 去重
  filterParams.attrs = attrs
  // 把过滤条件传递到父组件中
  emit('filter-change', filterParams)
}

</script>
<style scoped lang='less'>
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;

  .item {
    display: flex;
    line-height: 40px;

    .head {
      width: 80px;
      color: #999;
    }

    .body {
      flex: 1;

      a {
        margin-right: 36px;
        transition: all .3s;
        display: inline-block;

        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
}
</style>